<template>
  <div class="caculator">
    <div class="c-icon" @click="dialogVisible = true">
      <img src="@/assets/hp/calculator.png" alt="">
      <div class="txt">退款计算器</div>
    </div>
    <el-dialog
      title="退款计算器"
      :visible.sync="dialogVisible"
      :width="'732px'"
    >
      <div class="tip">退款=课程价格-课程价格×入学服务费-课程价格×综合管理费÷90×课程服务天数</div>
      <div class="form">
        <el-form  ref="form" :model="calForm" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="课程价格">
                        <el-input-number v-model="calForm.price"  :controls="false" :min="0" placeholder="指实际订单价格"></el-input-number>
                        <span>元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="课程服务天数">
                        <el-input-number v-model="calForm.day"  :controls="false" :min="0" placeholder="请输入服务天数"></el-input-number>
                        <span>天</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="入学服务费">
                        <el-input-number v-model="calForm.service1"  :controls="false" :min="0" :max="100" placeholder="办理入学则收取"></el-input-number>
                        <span>%</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付手续费">
                        <el-input-number v-model="calForm.pay"  :controls="false" :min="0" :max="100" placeholder="第三方首款平台费用"></el-input-number>
                        <span>%</span>
                        <!-- <span>(办理入学则收取)</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="综合管理费">
                        <el-input-number v-model="calForm.service2"  :controls="false" :min="0" :max="100" placeholder="已经消耗的课程服务天数"></el-input-number>
                        <span>%</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="bot">
          <div class="amount">退款金额：<span><el-input-number class="a-input" v-model="amount"  :controls="false" :precision="2"></el-input-number></span></div>
          <div class="btn" @click="count()">开始计算</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "RefundCalculator",
  data() {
    return {
      dialogVisible: false,
      calForm: {
        price: undefined,
        day: undefined,
        service1: undefined,
        service2: undefined,
        pay:undefined
      },
      amount:null,
    };
  },
  methods: {
    count() {
        // 退款=课程价格-课程价格x入学服务费-课程价格x课程学习费-课程价格x综合管理费÷90x课程服务天数
        let m = this.calForm;
        // console.log((m.price*m.service1||0),(m.price*m.service2||0)*0.01/90*(m.day||0),(m.price*m.pay||0))
        this.amount = m.price - (m.price*m.service1||0)*0.01 - (m.price*m.service2||0)*0.01/90*(m.day||0) - (m.price*m.pay||0)*0.01;
        console.log(this.amount)
    },
  },
};
</script>
<style lang="scss" scoped>
.caculator {
    font-family: DINPro;
  .c-icon {
    position: fixed;
    bottom: 17px;
    right: 30px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    .el-icon-film {
      font-size: 40px;
    }
    .txt{
      font-size: 12px;
      color: #1276FF;
    }
  }
  .tip{
      padding-bottom: 40px;
      font-size: 14px;
      color: #666;
  }
  .bot{
      border-top: 1px solid #F1F1F1;
      padding-top:30px;
      display: flex;
      justify-content: space-between;
      .amount{
          font-size: 16px;
          align-items: center;
          span{
              font-weight: bold;
              font-size: 30px;
          }
      }
      .btn{
          width: 159px;
            height: 46px;
            line-height: 46px;
            background: #1276FF;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
      }
  }
  /deep/ .el-dialog{
      border-radius: 20px;
      background: linear-gradient(0deg, #fff 60%,#E0EDFD);
      .el-dialog__header{
          padding: 30px 40px 0;
          .el-dialog__title{
              font-size: 24px;
          }
          .el-dialog__headerbtn{
              top: 30px;
              right: 40px;
          }
          .el-icon-close{
              font-size: 28px !important;
          }
      }
      .el-dialog__body{
          padding: 20px 40px;
      }
  }
  /deep/ .el-form-item__label{
      text-align: left;
      font-size: 14px;
  }
  /deep/ .a-input{
      .el-input__inner{
        border: none;
        font-size: 30px;
        text-align: left;
        font-weight: bold;
      }
      
  }
}
</style>